為什麼會出現 X 軸？

當網頁的內容寬度超過了瀏覽器視窗（viewport）的寬度時，就會自動產生 X 軸。這通常是因為以下幾種情況：

1. 元素設定了固定寬度

使用 width: 100vw 或 width: 500px 等固定值，很容易在小螢幕上超出邊界。

✅ 解法：改用相對單位（如 % 或 max-width）

CSS
.container {
  max-width: 100%;
  width: 100%;
  }

2. 使用了過大的 vw 單位

100vw 表示「螢幕寬度」，但它包含了捲軸寬度，所以有時會比畫面實際內容還寬一點，導致產生橫向滾動。

✅ 解法：避免直接用 100vw，或在必要時設定 overflow-x: hidden。

3. 元素內容太長，無法自動換行

像是圖片太寬、長網址、表格等，超出容器後就會撐出整個版面。

✅ 解法：加上強制換行、限制最大寬度

CSS
img {
  max-width: 100%;
  height: auto;
}

.long-text {
  word-break: break-word;
  overflow-wrap: break-word;
}

4. 負邊距（negative margin）或 translate 調整位置

有時為了做視覺效果，會用負邊距或 CSS 動畫把元素推出去畫面，沒控制好就會造成溢出。

✅ 解法：確保這些特效元素加上 overflow: hidden 或使用 clip-path

✂️ 一個簡單的解法：加上 overflow hidden

如果一時找不到是哪個元素造成的，也可以加上這段 CSS 先擋住滾動條，暫時解決問題：

CSS
body {
  overflow-x: hidden;
  }

⚠️ 這是「擋住症狀」不是解決根本原因，用來臨時救急可以，但最好還是找出是哪個元素超出了邊界。

結語

響應式網頁的關鍵，就是「彈性」與「適應不同裝置」。當你發現畫面出現橫向捲軸時，不要慌張，先從：

-固定寬度

-圖片與文字內容

-CSS 動畫或 transform

-占滿 vw 的元素

這幾個地方下手檢查，就能有效解決 X 軸問題！